<style lang="scss" scoped>
.r1 {
  display: flex;
}
.list {
  padding: 10px;
  div {
    margin: 5px;
  }
  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}

.RMdoctor {
  dl {
    display: flex;
    padding: 10px;
    margin-top: 10px;
    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 10px;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      div {
        width: 100%;
        height: 30px;
        font-size: 15px;
      }
    }
  }
}

.book {
  dl {
    line-height: 20px;
    dt {
      margin: 10px 0;
      font-size: 18px;
    }
    dd {
      font-size: 14px;
    }
  }
}
</style>

<template>
  <div>
    <header>
      <van-nav-bar
        title="网上预约挂号..."
        left-arrow
        @click-left="$router.back()"
      />
    </header>

    <van-search
      v-model="searchValue"
      show-action
      placeholder="请输入搜索关键词"
      @search="handSearch"
    >
      <template #action>
        <div @click="handSearch">搜索</div>
      </template>
    </van-search>
    <div v-if="flag == true">
      <h3>热门推荐</h3>
      <div class="r1">
        <div style="padding: 10px"><van-tag type="danger">1</van-tag></div>
        <van-cell title="中国人民解放军第二五四医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#fe7e03">2</van-tag></div>
        <van-cell title="河北医科大学第三医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#ffaf09">3</van-tag></div>
        <van-cell title="宁城县蒙医中医医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#cfa488">4</van-tag></div>
        <van-cell title="内蒙古医科大学附属人民医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#cfa488">5</van-tag></div>
        <van-cell title="内蒙古自治区人民医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#cfa488">6</van-tag></div>
        <van-cell title="长沙科信肿瘤医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#cfa488">7</van-tag></div>
        <van-cell title="苏州肤康皮肤病医院"></van-cell>
      </div>
      <div class="r1">
        <div style="padding: 10px"><van-tag color="#cfa488">8</van-tag></div>
        <van-cell title="广州中医药大学金沙洲医院"></van-cell>
      </div>
    </div>

    <div v-else>
      <van-tabs v-model:active="active">
        <van-tab title="全部">
          <van-cell-group>
            <van-cell
              title="相关医院"
              value="更多"
              is-link
              @click="active = 1"
            />
            <div class="list">
              <dl v-for="(v, i) in SearchSocoData" :key="i" :v="v" @click="onRDetail(v)">
                <dt>
                  <img :src="v.socoimage" alt="" />
                </dt>
                <dd>
                  <div class="name">{{ v.nosocomium }}</div>
                  <div>
                    <van-tag plain type="success" style="margin: 0 5px">{{
                      v.socostate
                    }}</van-tag>
                    <van-tag plain type="success">{{ v.socolv }}</van-tag>
                  </div>
                  <div style="font-size: 14px">科室：{{ v.socoadmin }}</div>
                  <div style="font-size: 14px">地址：{{ v.sococity }}</div>
                </dd>
              </dl>
            </div>
          </van-cell-group>
          <van-cell-group>
            <van-cell
              title="相关医生"
              value="更多"
              is-link
              @click="active = 2"
            />
            <div
              v-for="(item, index) in SearchDoctorData"
              :key="index"
              class="RMdoctor"
            >
              <dl>
                <dt>
                  <img
                    :src="item.doctorimage"
                    alt=""
                    style="width: 50px; height: 50px"
                  />
                </dt>
                <dd>
                  <div class="name">
                    <div>{{ item.doctorname }}</div>
                    <div style="font-size: 15px">{{ item.doctorstate }}</div>
                    <div style="position: absolute; right: -290px">
                      <van-button
                        round
                        type="success"
                        style="width: 80px; height: 35px"
                         @click="handRDoctor(item)"
                        >去挂号</van-button
                      >
                    </div>
                  </div>

                  <div style="font-size: 14px">{{ item.doctoradministre }}</div>
                  <div>
                    <van-text-ellipsis
                      :content="item.doctordescword"
                      rows="2"
                    />
                  </div>
                </dd>
              </dl>
            </div>
          </van-cell-group>

          <van-cell-group inset>
            <van-cell
              title="相关资讯"
              value="更多"
              is-link
              @click="active = 3"
            />
            <div class="book">
              <dl v-for="(v, i) in SearchBookData" :key="i" :v="v">
                <dt>
                  {{ v.texttitle }}
                </dt>
                <dd>
                  <van-text-ellipsis :content="v.textdescword" rows="2" />
                  <div class="name">
                    <van-tag type="success">{{ v.texttype }}</van-tag>
                  </div>
                </dd>
              </dl>
            </div>
          </van-cell-group>
        </van-tab>
        <van-tab title="医院">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="list">
              <dl v-for="(v, i) in SearchSocoData" :key="i" :v="v" @click="onRDetail(v)">
                <dt>
                  <img :src="v.socoimage" alt="" />
                </dt>
                <dd>
                  <div class="name">{{ v.nosocomium }}</div>
                  <div>
                    <van-tag plain type="success" style="margin: 0 5px">{{
                      v.socostate
                    }}</van-tag>
                    <van-tag plain type="success">{{ v.socolv }}</van-tag>
                  </div>
                  <div style="font-size: 14px">科室：{{ v.socoadmin }}</div>
                  <div style="font-size: 14px">地址：{{ v.sococity }}</div>
                </dd>
              </dl>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="医生">
          <div
            v-for="(item, index) in SearchDoctorData.slice(0, 14)"
            :key="index"
            class="RMdoctor"
          >
            <dl>
              <dt>
                <img
                  :src="item.doctorimage"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </dt>
              <dd>
                <div class="name">
                  <div>{{ item.doctorname }}</div>
                  <div style="font-size: 15px">{{ item.doctorstate }}</div>
                  <div style="position: absolute; right: -290px">
                    <van-button
                      round
                      type="success"
                      style="width: 80px; height: 35px"
                      @click="handRDoctor(item)"
                      >去挂号</van-button
                    >
                  </div>
                </div>

                <div style="font-size: 14px">{{ item.doctoradministre }}</div>
                <div>
                  <van-text-ellipsis :content="item.doctordescword" rows="2" />
                </div>
              </dd>
            </dl>
          </div>
        </van-tab>
        <van-tab title="资讯">
          <van-cell-group inset>
            <van-cell title="共找到关结果2000条" />
          </van-cell-group>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="book">
              <dl
                v-for="(v, i) in SearchBookData"
                :key="i"
                :v="v"
                @click="KPdetail(v)"
              >
                <dt>
                  {{ v.texttitle }}
                </dt>
                <dd>
                  <van-text-ellipsis :content="v.textdescword" rows="2" />
                  <div class="name">
                    <van-tag type="success">{{ v.texttype }}</van-tag>
                  </div>
                </dd>
              </dl>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import type { bookStata, doctorState, socoState,ListState} from '../../interface/index'
import { useRouter } from 'vue-router'
import Info from './Info/indexView.vue'
import axios from 'axios'
const active = ref(0)
const flag = ref(true)

const router = useRouter()
const loading = ref(true)
const finished = ref(false)
const config = reactive({
  pageCode: 1,
  pageSize: 10,
})
const onLoad = () => {
  config.pageCode++
  loading.value = true
}
// 搜索框输入内容
const searchValue = ref('')
const SearchBookData = ref<bookStata[]>([])
const SearchDoctorData = ref<doctorState[]>([])
const SearchSocoData = ref<socoState[]>([])
const nosocomium = ref<string[]>(
  JSON.parse(localStorage.getItem('nosocomium') || '[]'),
)
watch(nosocomium, () => {
  localStorage.setItem('nosocomium', JSON.stringify(nosocomium.value))
})
const handSearch = () => {
  flag.value = false
  nosocomium.value = [...new Set([searchValue.value, ...nosocomium.value])]
  getList()
}
const getList = () => {
  axios
    .get('/api/search', {
      params: {
        searchValue: searchValue.value,
      },
    })
    .then(res => {
      const { data } = res.data
      SearchBookData.value = data.book
      SearchDoctorData.value = data.doctor
      SearchSocoData.value = data.soco
    })
}
getList()
const KPdetail = (v: bookStata) => {
  router.push({
    path: `/detail2/${v.textid}`,
  })
}

const onRDetail = (v: any) => {
  router.push({
    path: `/RDetail/${v.socoid}`,
  })
}

const handRDoctor = (item: doctorState) => {
  router.push({
    path: `/RDoctor/${item.doctorid}`,
  })
}
</script>
